<template>
  <div class="NumberPropertyItem">
    <span class="label">{{ label }}</span>
    <span class="input-group">
      <el-input-number
        class="el-input-number"
        v-model="object[prop]"
        size="mini"
        :min="min"
        :max="max"
        :step="step"
        :disabled="disabled"
        controls-position="right"
        @keydown.native.stop
      ></el-input-number>
    </span>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { InputNumber } from 'element-ui'

@Component({
  components: {
    [InputNumber.name]: InputNumber
  }
})
export default class NumberPropertyItem extends Vue {
  @Prop({ type: String })
  private label!: string;

  @Prop({ type: Object, required: true })
  private object!: object;

  @Prop({ type: [String, Number] })
  private prop!: string | number;

  @Prop({ type: Number, default: -Infinity })
  private min!: number;

  @Prop({ type: Number, default: Infinity })
  private max!: number;

  @Prop({ type: Number, default: 1 })
  private step!: number;

  @Prop({ type: Boolean, default: false })
  private disabled!: boolean;
}
</script>

<style scoped lang="scss">
@import '~@/style/variables.scss';
.NumberPropertyItem {
  .el-input-number {
    width: 100%;
  }
}
</style>
